<template>
    <div class="content">
        <div class="list">
            <img src="../assets/loginImg/bac-bg.jpg" @click="cccc"></img>
            <div class="title">我是标题</div>
            <div class="con">我是内容</div>
            <a href="weixin://dl/scan">扫一扫</a>
        </div>

        <div class="list">
            <img src="../assets/img/coupon.png"></img>
            <div class="title">我是标题</div>
            <div class="con">我是内容</div>
        </div>
        
        <div class="list" v-for="(value,index) in 15" :key='index'>
            <img src="../assets/img/coupon.png"></img>
            <div class="title">我是标题</div>
            <div class="con">我是内容</div>
        </div>

        <!-- 防抖节流测试 -->

        <div> 
            <button @click="handleDe">防抖（频繁提交表单）</button>
        </div>
        <div>
            <input type="text" @input="handleTh"/>
        </div>

        
    </div>
</template>

<script>
import handleDt from "../http/shake";
export default {
  name: "WorkspaceJsonText",

  data() {
    return {};
  },

  mounted() {},

  methods: {
    cccc() {
        // window.location.href = "weixin://";
    },
    // // 防抖（按钮点击）
    handleDe: handleDt.debounce(() => {
      console.log(
        "不管你怎么点击，我只在2s后触发事件，2s内点击我也要等到2s后再触发事件"
      );
    }, 1000),
    // 节流（请求数据的方法）
    getData: handleDt.throttle(() => {
      console.log(
        "第一次请求马上触发，往后不管你怎么触发，我只在5s后请求,5s内触发我要重新计算时间的"
      );
    }, 2000),
    // 输入框值改变触发
    handleTh() {
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 30rpx;
  box-sizing: border-box;
  column-count: 2;
  .list {
    break-inside: avoid;
    width: 330rpx;
    border: 1px solid #f4f4f4;
    img {
      width: 100%;
      border-radius: 6rpx;
    }

    .title {
      margin-left: 15rpx;
      margin-right: 15rpx;
      font-size: 30rpx;
    }
    .con {
      margin: 15rpx;
      margin-top: 20rpx;
      display: flex;
      font-size: 26rpx;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>